import React, { Component } from 'react';
import { connect } from 'react-redux';
import { 
  Grid, 
  Card, 
  Button, 
  Space, 
  Badge,
  Toast 
} from 'antd-mobile';
import { 
  AppOutline, 
  UserOutline, 
  ShopbagOutline, 
  HeartOutline,
  SetOutline,
  MessageOutline 
} from 'antd-mobile-icons';
import PropTypes from 'prop-types';
import { setUserInfo, addNotification } from '../../store/reducers/userReducer';
import { setCurrentPage } from '../../store/reducers/appReducer';
import styles from './HomePage.module.less';

class HomePage extends Component {
  static propTypes = {
    userInfo: PropTypes.object,
    isLoggedIn: PropTypes.bool,
    currentPage: PropTypes.string,
    setUserInfo: PropTypes.func.isRequired,
    setCurrentPage: PropTypes.func.isRequired,
    addNotification: PropTypes.func.isRequired,
  };

  static defaultProps = {
    userInfo: null,
    isLoggedIn: false,
    currentPage: 'homePage',
  };

  componentDidMount() {
    const { setCurrentPage } = this.props;
    setCurrentPage('homePage');
  }

  handleLogin = () => {
    const { setUserInfo, addNotification } = this.props;
    
    // 模拟登录
    const mockUser = {
      id: 1,
      name: '用户',
      avatar: 'https://via.placeholder.com/40',
      phone: '138****8888',
    };
    
    setUserInfo(mockUser);
    addNotification({
      type: 'success',
      message: '登录成功！',
    });
    
    Toast.show('登录成功！');
  };

  handleLogout = () => {
    const { setUserInfo } = this.props;
    setUserInfo(null);
    Toast.show('已退出登录');
  };

  handleFeatureClick = (feature) => {
    Toast.show(`点击了${feature.title}`);
  };

  render() {
    const { userInfo, isLoggedIn } = this.props;

    const features = [
      { key: 'profile', title: '个人中心', icon: <UserOutline />, color: '#1677ff' },
      { key: 'products', title: '商品列表', icon: <ShopbagOutline />, color: '#52c41a' },
      { key: 'favorites', title: '我的收藏', icon: <HeartOutline />, color: '#fa541c' },
      { key: 'settings', title: '设置', icon: <SetOutline />, color: '#722ed1' },
    ];

    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <div className={styles.welcome}>
            <h1 className={styles.title}>欢迎使用</h1>
            <p className={styles.subtitle}>基于 React 18 的移动端 H5 应用</p>
          </div>
          
          <div className={styles.userSection}>
            {isLoggedIn ? (
              <div className={styles.userInfo}>
                <img 
                  src={userInfo.avatar} 
                  alt="头像" 
                  className={styles.avatar}
                />
                <div className={styles.userDetails}>
                  <p className={styles.userName}>{userInfo.name}</p>
                  <p className={styles.userPhone}>{userInfo.phone}</p>
                </div>
                <Button 
                  size="small" 
                  color="danger" 
                  onClick={this.handleLogout}
                >
                  退出
                </Button>
              </div>
            ) : (
              <Button 
                color="primary" 
                onClick={this.handleLogin}
                className={styles.loginBtn}
              >
                立即登录
              </Button>
            )}
          </div>
        </div>

        <div className={styles.content}>
          <Card title="功能菜单" className={styles.featureCard}>
            <Grid columns={2} gap={16}>
              {features.map(feature => (
                <Grid.Item key={feature.key}>
                  <div 
                    className={styles.featureItem}
                    onClick={() => this.handleFeatureClick(feature)}
                  >
                    <div 
                      className={styles.featureIcon}
                      style={{ color: feature.color }}
                    >
                      {feature.icon}
                    </div>
                    <p className={styles.featureTitle}>{feature.title}</p>
                  </div>
                </Grid.Item>
              ))}
            </Grid>
          </Card>

          <Card title="技术栈" className={styles.techCard}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <div className={styles.techItem}>
                <span className={styles.techLabel}>前端框架:</span>
                <span className={styles.techValue}>React 18</span>
              </div>
              <div className={styles.techItem}>
                <span className={styles.techLabel}>状态管理:</span>
                <span className={styles.techValue}>Redux Toolkit</span>
              </div>
              <div className={styles.techItem}>
                <span className={styles.techLabel}>路由管理:</span>
                <span className={styles.techValue}>React Router v6</span>
              </div>
              <div className={styles.techItem}>
                <span className={styles.techLabel}>UI组件:</span>
                <span className={styles.techValue}>Ant Design Mobile</span>
              </div>
              <div className={styles.techItem}>
                <span className={styles.techLabel}>样式方案:</span>
                <span className={styles.techValue}>CSS Modules + Less</span>
              </div>
            </Space>
          </Card>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  userInfo: state.user.userInfo,
  isLoggedIn: state.user.isLoggedIn,
  currentPage: state.app.currentPage,
});

const mapDispatchToProps = {
  setUserInfo,
  setCurrentPage,
  addNotification,
};

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);
